<template>
  <view>
    <!--          顶部的日历-->
    <view class="head__calendar">
      <view class="head__calendar__handle">
        <view class="head__calendar__handle__left head__calendar__handle__item " @click="openDateTime()">
          <view class="head__calendar__handle__item--value">{{ dateTime |format("YYYY.MM") }}</view>
          <text class="iconfont icon-shixinjiantou-xiangshang-copy" :class="dateShow? 'rotateClass' : ''"></text>
        </view>
        <view class="head__calendar__handle__right ">
          <view class="teacher-but-60">
            <u-button @click="cutDate()">
              <view class="head__calendar__handle__item">
                <text class="head__calendar__handle__item--value">展开</text>
                <text class="iconfont icon-shixinjiantou-xiangshang-copy"
                      :class="rowDate ? '' : 'rotateClass'"></text>
              </view>
            </u-button>
          </view>
        </view>
      </view>
      <view class="head__calendar__grid">
        <view class="head__calendar__grid__item" v-for="(item,index) in week" :key="index">{{ item }}</view>
      </view>
      <view class="head__calendar__grid">
        <view class="head__calendar__grid__item" v-for="(item,index) in dateList" :key="index">{{ item }}</view>
      </view>
    </view>

    <u-datetime-picker
      :show="dateShow"
      v-model="dateTime"
      mode="year-month"
      @close="close"
      @cancel="close"
      @confirm="screenTime"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>
  </view>
</template>

<script>
import dayjs from 'dayjs';

const WEEK = ['日', '一', '二', '三', '四', '五', '六'];
const ROW = [1, 2, 3, 4, 5, 6, 7];

export default {
  name: "lr-calendar",
  data(){
    return {
      week: WEEK,
      dateList: [],
      rowDate: true,
      totalDay: [],
      weekDay: [],
      dateShow: false,
      dateTime: dayjs().unix() * 1000,
    }
  },
  methods: {
    /**
     * 切换 日期显示 单行还是多行
     * @param {Boolean}   this.rowDate true 为单行
     */
    cutDate(){
      this.rowDate = !this.rowDate;
      this.rowDate ? this.dateList = this.weekDay : this.dateList = this.totalDay;
    },
    /**
     * 获取日期
     * @param {dayjs.Dayjs} time 时间
     */
    getTime(time){
      time = dayjs(time) || dayjs();
      console.log(time)
      // 获取当前月份的第一天
      const firstDayOfMonth = time.startOf('month');
      // 获取第一天是星期几
      const dayOfWeek = firstDayOfMonth.day();
      const weekList = [];
      //计算当前需要添加个空元素
      const num = this.computeDate(dayOfWeek);
      //像weekList中push 空元素
      for (let i = 0; i < num; i++) {
        weekList.push('');
      }
      // 获取当前月有几天
      const daysInMonth = time.daysInMonth();
      //获取完整的日历
      for (let i = 0; i < daysInMonth; i++) {
        weekList.push(i + 1);
      }
      this.totalDay = weekList;
      //获取到当前日期周
      const currentWeekList = [];
      // 获取当前日期是周几
      const currentWeek = time.day();
      // 获取今天是几号
      const dayOfMonth = time.date();
      let { previousMonthDays, nextMonthDays } = this.getDaysInPreviousAndNextMonths(time);
      for (let i = 0; i < currentWeek; i++) {
        dayOfMonth !== 1 ? currentWeekList.unshift(dayOfMonth - (1 + i)) : currentWeekList.unshift(previousMonthDays - (1 + i));
      }
      //假设超过了当前月的日期 需要 下个月的日期补位;
      let nextDay = 0;
      let index = 0;
      for (let i = currentWeek; i <= 6; i++) {
        if (dayOfMonth < daysInMonth) {
          currentWeekList.push(dayOfMonth + index);
          index++;
        } else {
          currentWeekList.push(nextDay + 1);
          nextDay++;
        }
      }
      this.dateList = currentWeekList;
      this.weekDay = currentWeekList;
      console.log(currentWeekList, weekList)
    },
    /**
     * 计算当前月的第一天是否是星期天
     * @param {Number} week 第一天是星期几
     * @param {Number} decrementBy
     */
    computeDate(week, decrementBy = 1){
      let num = 0;
      let i = week;
      while (i > 0) {
        i -= decrementBy;
        num++;
      }
      return num;
    },
    /**
     * 获取上个月 和下个月的天数
     * @param {dayjs.Dayjs} now 当前月或者月份
     * @param {dayjs.Dayjs} previousMonthDays 上个月天数
     * @param {dayjs.Dayjs} nextMonthDays 下个月天数
     */
    getDaysInPreviousAndNextMonths(now = dayjs()){
      // 获取上个月的第一天和最后一天
      const startOfPreviousMonth = now.subtract(1, 'month').startOf('month');
      const endOfPreviousMonth = now.subtract(1, 'month').endOf('month');

      // 获取下个月的第一天和最后一天
      const startOfNextMonth = now.add(1, 'month').startOf('month');
      const endOfNextMonth = now.add(1, 'month').endOf('month');

      // 计算上个月的天数
      const daysInPreviousMonth = endOfPreviousMonth.diff(startOfPreviousMonth, 'day') + 1;

      // 计算下个月的天数
      const daysInNextMonth = endOfNextMonth.diff(startOfNextMonth, 'day') + 1;

      // 返回上个月和下个月的天数
      return {
        previousMonthDays: daysInPreviousMonth,
        nextMonthDays: daysInNextMonth
      };
    },
    /**
     * 打开时间选择器
     */
    openDateTime(){
      this.dateShow = !this.dateShow;
    },
    /**
     * 关闭时间选择器
     */
    close(){
      this.dateShow = false;
    },
    /**
     * 筛选时间
     */
    screenTime(e){
      this.dateTime = e.value;
      this.dateShow = false;
      this.getTime(e.value);
    },
  }
}
</script>

<style lang="scss" scoped>
.head__calendar {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;

  &__handle {
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__item {
      display: flex;
      align-items: center;

      &--value {
        margin-right: 20rpx;
      }

      .iconfont {
        font-size: 20rpx;
        color: #ffffff;
        transition: all 0.5s ease;
      }
    }

    &__left {
      .icon-shixinjiantou-xiangshang-copy {
        color: #908b89;
      }
    }

    &__right {
      width: 140rpx;
    }
  }

  &__grid {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    transition: height 0.5s ease;

    &__item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      color: $u-tips-color;
    }
  }
}
</style>
